<template>
	<view class="review-box page-box">
		<view style="height: 148rpx;">
			<u-navbar bgColor="transparent" height="74">
				<view class="u-nav-slot flex-align-center" slot="left">
					<image class="image1" src="@/static/images/review/fanhui.png" @click="goBack" />
					<span style="margin-left:33rpx">优题库</span>
				</view>
				<view class="u-nav-slot-center flex-align-center" slot="center">
					<view class="tab-item flex-center" :class="current === index ? 'active':''"
						v-for="(item,index) in tabList" :key="index" @click="tabChange(index)">
						{{item.name}}
					</view>
				</view>
				<view slot="right" class="u-nav-slot-right flex-center" @click="toTestRecord">
					测试记录
				</view>
			</u-navbar>
		</view>

		<view class="content">
			<!-- 试卷 -->
			<block v-if="current === 0">
				<testPaper></testPaper>
			</block>
			<!-- 错题列表 -->
			<block v-if="current === 1">
				<wrongWordList></wrongWordList>
			</block>

		</view>

	</view>
</template>

<script>
	import testPaper from './components/testPaper/testPaper.vue'
	import wrongWordList from './components/wrongWordList/wrongWordList.vue'
	export default {
		components: {
			testPaper,
			wrongWordList
		},
		data() {
			return {
				current: 0,
				tabList: [{
						name: '试卷'
					},
					{
						name: '错题列表'
					}
				],

			};
		},

		methods: {

			change(e) {
				console.log("e:", e);
			},
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			tabChange(val) {
				console.log(val);
				this.current = val;
			},
			// 跳转测试记录
			toTestRecord(){
				uni.navigateTo({
					url:'/pages/questionBank/components/testRecord/testRecord'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@function px_2_vw($px) {
		@return #{$px * 100 / 1920}vw;
	}

	.page-box {
		background: #505CFE;
		position: relative;
		display: flex;
		flex-direction: column;
		position: relative;
	}

	::v-deep .u-navbar__content__left {
		margin: 0 33rpx !important;
	}

	::v-deep .u-navbar__content__right {
		margin: 0 33rpx !important;
	}

	.u-nav-slot {
		color: #fff;
		font-size: px_2_vw(39);

		.image1 {
			width: px_2_vw(52);
			height: px_2_vw(63);
		}


	}

	.u-nav-slot-center {
		display: flex;
		align-items: center;
		color: #B0B0B0;
		font-size: px_2_vw(54);
		background: #6771FE;
		width: px_2_vw(431);
		height: px_2_vw(81);
		padding: 6rpx 10rpx;
	}

	.tab-item {
		color: #fff;
		width: px_2_vw(205);
		height: px_2_vw(69);
		font-size: px_2_vw(36);
	}

	.active {
		background: radial-gradient(100% 100% at 0% 0%, #7200FF 0%, #1B0481 100%);
	}

	.u-nav-slot-right {
		width: px_2_vw(187);
		height: px_2_vw(56);
		font-size: px_2_vw(25);
		border-radius: 27rpx;
		background: #6771FE;
		color: #fff;

	}

	.content {
		flex: 1;
		margin-bottom:33rpx;
		// margin: 0 54rpx 33rpx 54rpx;
	}

</style>